﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>联系人管理器</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div>
        <div><label>省：</label><input data-bind="value: province" /></div>
        <div><label>市：</label><input data-bind="value: city" /></div>
        <div><label>区：</label><input data-bind="value: district" /></div>
        <div><label>街道：</label><input data-bind="value: street" /></div>
        <div><label>地址：</label><input data-bind="value: address" /></div>
        <div><input type="button" data-bind="click: format" value="确定" /></div>
    </div>
    
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/knockout-3.4.2.js"></script>
    <script src="Scripts/viewmodel.js"></script>

    <script type="text/javascript">
        function AddressModel() {
            var self = this;
            self.province = ko.observable("江苏省");
            self.city = ko.observable("苏州市");
            self.district = ko.observable("工业园区");
            self.street = ko.observable("星湖街328号");
            self.address = ko.observable("");

            self.format = function () {
                if (self.province() && self.city() && selft.street()) {
                    var address = self.province() + " " + self.city() + " " + self.address();
                    self.address(address);
                } else {
                    alert("请提供完整的地址信息。");
                }
            };

            self.format();
        }

        ko.applyBindings(new AddressModel());
    </script>

</body>
</html>